<template>
	<view>
		<cu-custom  bgColor="bg-black-two"  :isBack="true">
			<block slot="content">地址列表</block>
		</cu-custom>
		<view>
			<view class="my-bg">
				<view v-for="(item,index) in detailList" :key="index"
				:class="index == Number(detailList.length-1) ? 'my-title-bg-last':'my-title-bg'"
				>
					<view class=" ">
						<view class="flex">
							<view style="font-weight: bold;font-size: 16px;">{{item.name}}</view>
							<view style="margin-left: 15px;color: #999;margin-top: 14rpx;">{{item.phone}}</view>
						</view>
						<view style="color: #6A6A71;">
							<text>{{item.province}}{{item.city}}{{item.area}}{{item.detail_address}}</text>
						</view>
						 <view class="flex justify-end">
						 	<view @click="linktoInvoice(item)" style="color: #03A9F4;padding-right: 20px;">修改</view>
						 	<view @click="showModal('del',item)" style="color: #ea4747;">删除</view>
						 </view>
					</view>
				</view>
			</view>
			<view class="padding flex justify-center" style="position: fixed; bottom: 0px;background-color: #FFFFFF;width: 100%;">
				<button  @click="linktoInvoice()" class="cu-btn round bg-green-two" style="height: 45px;">添加收货地址</button>
			</view>
			<view class="cu-modal" :class="modalName=='del'?'show':''">
				<view class="cu-dialog bg-white">
					<view class="cu-bar justify-end">
						<view class="content">删除</view>
						<view class="action" @tap="hideModal">
							<text class="cuIcon-close text-blue" style="color: #847d7d;"></text>
						</view>
					</view>
					<view class="padding-xl" style="color: #262626;">
						确定删除这条数据？
					</view>
					<view class="cu-bar flex flex-wrap justify-between align-center" style="width:200px;margin:24px auto;">
						<button @click="hideModal()" class="cu-btn out-btn" 
									style="background-color:#fff;border: 1px solid #00A99D;">取消</button>
						<button @click="delData()" class="cu-btn confirm-btn" 
								style="background-color:#00A99D;">确定</button>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	//post API
	import {requestPost} from '@/common/util.js'
	var _self;
	export default{
		data(){
			return{
				id:0,
				jifen:0,//当前积分
				modalName:'',
				tixianNumber:'',//提现金额
				bankCode:'',//银行卡号
				detailList:[],//积分明细
				selectInvoiceId:0,
				deleteId:''
			}
		},
		 
		onShow() {
			_self = this;
			//获取发票列表
			this.getInitData();
		},
		onLoad(option) {
			if(Object.keys(option).length != 0){
				this.id = option.id;
			}
		},
		methods:{
			//获取地址列表
	async	getInitData(){
				uni.showLoading({ title: '加载中...', mask: true });
				let [err,res] = await this.$http.get('addressList',{},{
					token:true,
					checkToken:true,
				});
				// 失败
				if (!this.$http.errorCheck(err,res)){
					uni.hideLoading();
					return false;
				}
				uni.hideLoading();
				this.detailList = res.data.data;
			},

			//添加/修改
			linktoInvoice(item){
				let url = '/pages/center/address/add';
				if (item) {
					//修改
					url = `${url}?id=${item.id}`;
				}
				uni.navigateTo({
					url: url
				});
			},
			//跳转页面
			linktoPage(urlStr){
				uni.navigateTo({
					url:urlStr
				})
			},
			//长按提示删除
			 showModal(name,item){
				this.modalName = name
				this.deleteId = item.id;
			},
			//删除
			async delData(){
				_self.hideModal();
				uni.showLoading({ title: '删除中...', mask: true });
				//修改
				let [err,res] = await this.$http.post('delAddress',{
					id:this.deleteId
				},{
					token:true,
					checkToken:true ,
				});
				// 失败
				if (!this.$http.errorCheck(err,res)){
					uni.hideLoading();
					return false;
				}	
				uni.hideLoading();
				uni.showToast({
					title: '删除成功',
				});					
				setTimeout(function () {
					uni.hideToast();
					_self.deleteId = null;
					_self.getInitData();
				}, 2000);
			},
			hideModal() {
				this.modalName = null
			},
		}
		
	}
</script>

<style>
	.uni-input-placeholder{
		color: #262626;
	}
	
	.selected-bg{
		background: #E6E6E6;
	}
	
</style>